<!--
  -    Copyright (c) 2018-2025, infomng All rights reserved.
  -
  - Redistribution and use in source and binary forms, with or without
  - modification, are permitted provided that the following conditions are met:
  -
  - Redistributions of source code must retain the above copyright notice,
  - this list of conditions and the following disclaimer.
  - Redistributions in binary form must reproduce the above copyright
  - notice, this list of conditions and the following disclaimer in the
  - documentation and/or other materials provided with the distribution.
  - Neither the name of the pig4cloud.com developer nor the names of its
  - contributors may be used to endorse or promote products derived from
  - this software without specific prior written permission.
  - Author: infomng
  -->

<template>
  <div class="execution">
    <basic-container>
      <el-row :gutter="20">
        <el-col :gutter="20">
          <div class="grid-content bg-purple" style="text-align: center;margin-top: 10px">
            数据源：<el-select v-model="dsId" placeholder="请选择数据源" @change="dsChange"  filterable>
              <el-option
                v-for="item in dataSourceList"
                :key="item.id"
                :label="item.name"
                :value="item.id"/>
            </el-select>
          </div>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :gutter="20">
          <div class="grid-content bg-purple" style="text-align: center;margin-top: 10px">
            数据表：<el-select  v-model="tableName" placeholder="请选择数据表" @change="tbChange" filterable clearable>
              <el-option
                v-for="item in dataTableList"
                :key="item.tableName"
                :label="item.tableName"
                :value="item.tableName" />
            </el-select>
          </div>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :gutter="20">
          <div class="grid-content bg-purple" style="text-align: center;margin-top: 10px">
            表字段：<el-select v-model="columnName" placeholder="请选择表字段" @change="colChange" multiple filterable clearable>
              <el-option
                v-for="item in dataColumnList"
                :key="item.columnName"
                :label="item.columnName"
                :value="item.columnName" />
            </el-select>
          </div>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :gutter="20">
          <div class="grid-content bg-purple" style="text-align: center;margin-top: 10px">
            排序字段：<el-select v-model="orderField" placeholder="请选择排序字段"  filterable clearable>
            <el-option
              v-for="item in dataColumnList"
              :key="item.columnName"
              :label="item.columnName"
              :value="item.columnName" />
          </el-select>
          </div>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :gutter="20">
          <div class="grid-content bg-purple" style="text-align: center;margin-top: 20px">
            <el-button type="primary" @click="saveConfigure">保存</el-button>
          </div>
        </el-col>
      </el-row>
    </basic-container>
  </div>
</template>

<script>
import { getTbList, fetchSelectDsList,getTableList} from '@/api/pfoc/datascoure'
import { updateConfigure } from '@/api/pfoc/realitylinedeviceconfig'
    export default {
        name: 'configure',
        props: {
            id:{//产线设备配置ID
                type:String,
            },
            dsIds:{//数据源ID
                type:String,
            },
            tableNames:{//表名称
                type:String,
            },
            columnNames:{//列字段
                type:String,
            },
            orderFields:{//排序字段
                type:String,
            },
        },
        data() {
            return {
                dsId:null,//数据源ID
                dsName:null,//数据源名称
                tableName:null,//表名称
                columnName:null,//列字段
                comments:null,//列备注
                orderField:null,//排序字段
                dataSourceList: [],//数据源集合
                dataTableList:[],//数据源对应的表集合
                dataColumnList:[],//数据表对应的列集合

            }
        },
        created() {
            //获取数据源
            this.getDataSourceList();
        },
        computed: {
        },
        methods: {
            //回显
            configureInit(){
                if(!this.validatenull(this.dsIds)){//判断回显数据源不为空
                    var t = this;
                    fetchSelectDsList().then(response => {
                        this.dataSourceList = response.data.data
                        this.dsId =this.dsIds;//设置回显默认值
                        this.dataSourceList.find((item) => {
                            if (item.id === this.dsIds) {
                                this.dsName=item.name;//设置数据源名称
                            }
                        });
                        const obj = {
                            dsName:this.dsName
                        }
                        var tt = t;
                        getTbList(obj).then(response => {
                            t.dataTableList = response.data.data
                            if(!t.validatenull(t.tableNames)) {//判断回显数据表不为空
                                t.tableName = t.tableNames;
                                const params = {
                                    dsName:t.dsName,
                                    tableName:t.tableName
                                }
                                //重新查找对应列
                                getTableList(params).then(response => {
                                    tt.dataColumnList = response.data.data
                                    tt.orderField = tt.orderFields;//排序字段回显
                                    if(!tt.validatenull(tt.columnNames)){//判断回显数据列不为空
                                        tt.columnName = tt.columnNames.split(",");
                                        var comments = [];//列备注
                                        //这里的一层if是因为三个下拉框调取的一个方法  用参数str区分不同的下拉框 二种是使用一层for加一个Array.find方法
                                        for (let i in tt.columnName) {
                                            tt.dataColumnList.find((item) => {
                                                if (item.columnName === tt.columnName[i]) {
                                                    comments.push(item.comments)
                                                }
                                            })
                                        }
                                        //重新更新列备注数据
                                        if(!tt.validatenull(comments)) {
                                            tt.comments = comments.toString();
                                        }else{
                                            tt.comments=null;
                                        }
                                    }
                                })
                            }
                        })
                    })

                }
            },
            //获取数据源
            getDataSourceList() {
               fetchSelectDsList().then(response => {
                    this.dataSourceList = response.data.data
                    if (this.dataSourceList.length === 0) {
                        return new Promise((resolve, reject) => {
                            reject('数据源信息列表为空,请添加数据源')
                        })
                    }
                    if (this.dataSourceList.length > 0 && this.dsId ==null) {
                        this.dsId = this.dataSourceList[0].id;
                        this.dsName = this.dataSourceList[0].name;
                        this.getDataTableList();
                    }
                })
            },
            //获取数据源对应表
            getDataTableList() {
                const param = {
                    dsName:this.dsName
                }
                getTbList(param).then(response => {
                    this.dataTableList = response.data.data
                }).catch((err) => {
                    this.$message.error(err)
                })
            },
            //获取数据源对应表的对应列
           getDataColumnList(){
               const param = {
                   dsName:this.dsName,
                   tableName:this.tableName
               }
               getTableList(param).then(response => {
                   this.dataColumnList = response.data.data
               }).catch((err) => {
                   this.$message.error(err)
               })
           },
            //数据源选择
            dsChange(val){
                if(this.validatenull(val)){
                    this.dsName=null;
                }else{
                    this.dataSourceList.find((item) => {
                        if (item.id === val) {
                            this.dsName=item.name;
                        }
                    });
                    this.getDataTableList();//重新查询对应表
                }
            },

            //数据表选择
            tbChange(val){
                if(this.validatenull(val)){
                    this.tableName=null;
                }else{
                    this.dataTableList.find((item) => {
                        if (item.tableName === val) {
                            this.tableName=item.tableName;
                        }
                    });

                    this.getDataColumnList();//重新查找对应列
                }
                //清空字段选择以及数据集合
                this.dataColumnList = [];
                this.columnName=null;
            },
            //表字段选择
            colChange(val){
                var columnName = val;//列字段
                var comments = [];//列备注
                //这里的一层if是因为三个下拉框调取的一个方法  用参数str区分不同的下拉框 二种是使用一层for加一个Array.find方法
                for (let i in columnName) {
                    this.dataColumnList.find((item) => {
                        if (item.columnName === columnName[i]) {
                            if(!this.validatenull(comments)) {
                                comments.push(item.comments)
                            }
                        }
                    })
                }
                //重新更新列备注数据
                if(!this.validatenull(comments)) {
                    this.comments = comments.toString();
                }else{
                    this.comments=null;
                }
                console.log( comments)
            },
            //保存
            saveConfigure(){
                if(this.validatenull(this.dsName)){
                    this.$message.warning("请选择数据源。")
                    return;
                }
                if(this.validatenull(this.tableName)){
                    this.$message.warning("请选择数据表")
                    return;
                }
                if(this.validatenull(this.columnName)){
                    this.$message.warning("请选择表字段")
                    return;
                }
                if(this.validatenull(this.orderField)){
                    this.$message.warning("请选择排序字段")
                    return;
                }
                var obj ={
                    id:this.id,//需要更新的实际产线设备配置ID
                    dataStore:this.dsId,//数仓ID
                    tableName:this.tableName,//表名称
                    columnName:this.columnName.toString(),//列名
                    remarks:this.comments,//列备注
                    orderField:this.orderField //排序字段
            }

                //提交
                updateConfigure(obj).then(response => {
                    this.$message.success("保存成功。")
                    this.$emit('closeConfigurePage');//关闭页面
                }).catch((err) => {
                    this.$message.error(err)
                });
            }

        }
    }
</script>

<style lang="scss" scoped>
</style>

